html{font-size: 625%;background: #EEEEEE;}
.container{max-width:750px;min-width:320px;margin: 0 auto;margin-bottom: 50px;}

.topbar{background: #FF4E00;width: 100%;box-sizing:border-box;height: 40px;padding-left:10px;color: #fff;position: relative;}
.topbar .fa-angle-left{font-size: 0.4rem;position: absolute;}
.topbar h1{display: inline-block;width: 100%;text-align: center;font-size: 0.16rem;height: 40px;line-height: 40px;color: #fff;}
.topbar .sel{position: absolute;right:10px;top:0;display: block;height: 40px;line-height: 40px;font-size: 0.16rem;color:#fff;}
.main{width: 100%;box-sizing:border-box;background: #fff;margin-top: 10px;padding:10px 10px 0 10px;display: block;}
.main .up{width: 100%;box-sizing:border-box;padding-bottom: 10px;}
.main .up .up-left{width: 70px;height: 70px;float: left;border-radius: 40px;}
.main .up .up-left span{width: 100%;display: inline-block;text-align: center;height: 30px;line-height:30px;font-size: 0.16rem;}
.zhu{background: #FF7E00;}
.rang{background: #EE2828;}
.main .up .up-left span.up-name{position: relative;top:10px;color:#fff;font-weight: 700;}
.main .up .up-left span.down-name{color:#FFAA57;}
.main .up .up-right{width: calc(100% - 80px);box-sizing:border-box;float: right;color:#6F6F6F;padding: 5px;height: 70px;font-size: 0.14rem;overflow: hidden;text-overflow:ellipsis;display: -webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;}
.main .down{width: 100%;box-sizing:border-box;border-top: 1px solid #F5F5F5;height: 30px; line-height: 30px;color:#AAAAAA;}
.main .down .address{width: 50%;box-sizing:border-box;float: left;overflow: hidden;text-overflow:ellipsis;display: -webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;}
.main .down .time{float: right;text-align: right;}

.list{width: 100%;box-sizing:border-box;background: #fff;margin-top: 10px;padding:0 10px;display: flex;flex-direction:column;color:#101010;}
.list .con{display: flex;height: 30px;line-height: 30px;}
.list .con .item{flex:1;display: flex;}
.list .con .item span{display: inline-block;height:20px;padding:0 10px;line-height: 20px;}
.list .con .item span.zhu{color:#fff;background: #ff856c;margin-top: 5px;}
.list .con .item span.rang{color:#fff;background: #64cbbb;margin-top: 5px;}
.list .con .item span.ge{color:#ff856c;border:1px solid #ff856c;height: 18px;line-height: 18px;margin-top: 5px;margin-left: 10px;}
.list .con .item span.guang{color:#64cbbb;border:1px solid #64cbbb;height: 18px;line-height: 18px;margin-top: 5px;margin-left: 10px;}
.list .con .item.adr{overflow: hidden;text-overflow:ellipsis;display: -webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;text-align: right;font-size: 0.14rem;}
.list .con .item.cate{font-size: 0.16rem;font-weight: 700;padding-left:10px; }
.list .con .item span.name{text-align: left;font-size: 0.14rem;flex:1;padding:0;height: 30px;line-height: 30px;}
.list .con .item span.phone{text-align: right;font-size: 0.14rem;flex:2;padding:0;height: 30px;line-height: 30px;}
.list .con .item.msg{overflow: hidden;text-overflow:ellipsis;display: -webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;}
.list .con .item.day{text-align: right;display: inline-block;height: 30px;}